<template>
  <div>
    <!-- 悬浮机器人图标 -->
    <div
      class="qa-bot-icon"
      :style="{ left: position.x + 'px', top: position.y + 'px' }"
      @click="toggleDialog"
      @mousedown="startDrag"
      :class="{ dragging: isDragging, pulse: !dialogVisible }"
    >
      <div class="icon-glow"></div>
      <div class="icon-inner">
        <el-icon :size="28">
          <ChatDotRound />
        </el-icon>
      </div>
      <div class="notification-badge" v-if="messages.length > 0 && !dialogVisible">
        <span>{{ messages.length > 9 ? '9+' : messages.length }}</span>
      </div>
    </div>

    <!-- 问答对话框 -->
    <el-dialog
      v-model="dialogVisible"
      width="650px"
      :close-on-click-modal="false"
      class="qa-dialog"
      :show-close="true"
    >
      <template #header>
        <div class="dialog-title-wrapper">
          <span class="dialog-title-text">智能数据问答助手</span>
        </div>
      </template>
      <div class="qa-content">
        <!-- 历史对话记录 -->
        <div class="chat-history" ref="chatHistoryRef">
          <div v-if="messages.length === 0 && !loading" class="empty-state">
            <div class="intro-container">
              <div class="intro-header">
                <div class="intro-icon">🤖</div>
                <h2 class="intro-title">基金数据管理智能问答助手</h2>
                <p class="intro-subtitle">我是您的专属数据管理助手，专注于基金数据采集、更新、特征工程和数据治理。</p>
              </div>
              
              <div class="intro-capabilities">
                <h3 class="capabilities-title">✨ 核心能力</h3>
                <ul class="capabilities-list">
                  <li>实时查询基金数据统计、标签分布、聚类结果</li>
                  <li>深度分析数据质量、完整性、更新状态</li>
                  <li>提供专业的数据问题诊断和改进建议</li>
                </ul>
              </div>

              <div class="intro-examples">
                <h3 class="examples-title">💬 示例问题</h3>
                <div class="example-chips">
                  <div class="example-chip" @click="question = '系统里有多少只基金？'; nextTick(() => questionInput?.textarea?.focus())">
                    "系统里有多少只基金？"
                  </div>
                  <div class="example-chip" @click="question = '标签覆盖率是多少？'; nextTick(() => questionInput?.textarea?.focus())">
                    "标签覆盖率是多少？"
                  </div>
                  <div class="example-chip" @click="question = '数据更新到什么时候了？'; nextTick(() => questionInput?.textarea?.focus())">
                    "数据更新到什么时候了？"
                  </div>
                  <div class="example-chip" @click="question = '数据完整性如何？'; nextTick(() => questionInput?.textarea?.focus())">
                    "数据完整性如何？"
                  </div>
                  <div class="example-chip" @click="question = '我应该优先处理哪些数据问题？'; nextTick(() => questionInput?.textarea?.focus())">
                    "我应该优先处理哪些数据问题？"
                  </div>
                </div>
              </div>

              <div class="intro-footer">
                <p class="footer-text">🚀 开始使用：在输入框输入您的问题，支持自然语言提问！</p>
                <el-button 
                  type="text" 
                  class="detail-link" 
                  @click="showDetailDialog = true"
                  :icon="InfoFilled"
                >
                  查看详细说明
                </el-button>
              </div>
            </div>
          </div>
          <div
            v-for="(msg, index) in messages"
            :key="index"
            :class="['message', msg.type]"
          >
            <div class="message-content">
              <div v-if="msg.type === 'user'" class="user-message">
                <div class="message-avatar">
                  <el-icon class="user-icon"><User /></el-icon>
                </div>
                <div class="message-bubble user-bubble">
                  <div class="message-text">{{ msg.content }}</div>
                  <div class="message-time" v-if="msg.timestamp">{{ formatMessageTime(msg.timestamp) }}</div>
                </div>
              </div>
              <div v-else class="bot-message">
                <div class="message-avatar">
                  <el-icon class="bot-icon"><ChatDotRound /></el-icon>
                </div>
                <div class="message-bubble bot-bubble">
                  <div class="message-header">
                    <span class="bot-name">智能助手</span>
                    <el-button 
                      type="text" 
                      size="small" 
                      class="detail-link-btn"
                      @click="showDetailDialog = true"
                      :icon="InfoFilled"
                    >
                      详细说明
                    </el-button>
                  </div>
                  <div class="message-text">{{ msg.content }}</div>
                  <div class="message-time" v-if="msg.timestamp">{{ formatMessageTime(msg.timestamp) }}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="loading" class="message bot">
            <div class="message-content">
              <div class="bot-message">
                <el-icon class="bot-icon"><ChatDotRound /></el-icon>
                <div class="message-text loading-text">
                  <span class="loading-dot"></span>
                  <span class="loading-dot"></span>
                  <span class="loading-dot"></span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-area">
          <el-input
            ref="questionInput"
            v-model="question"
            type="textarea"
            :rows="3"
            placeholder="请输入您的问题..."
            @keydown.ctrl.enter="submitQuestion"
            @keydown.meta.enter="submitQuestion"
            :disabled="loading"
          />
          <div class="input-actions">
            <el-button
              type="primary"
              @click="submitQuestion"
              :loading="loading"
              :disabled="!question.trim()"
            >
              发送
            </el-button>
            <el-button @click="clearHistory" :disabled="loading">
              清空历史
            </el-button>
            <span class="hint">按 Ctrl+Enter 或 Cmd+Enter 快速发送</span>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 详细说明对话框 -->
    <el-dialog
      v-model="showDetailDialog"
      width="800px"
      title="基金数据管理智能问答助手 - 详细说明"
      class="detail-dialog"
    >
      <div class="detail-content">
        <div class="detail-section">
          <h3 class="section-title">🤖 助手介绍</h3>
          <p class="section-text">
            您好！我是基金数据管理智能问答助手，专门为数据智能化工程负责人设计，帮助您快速了解和管理基金数据采集、更新、特征工程和数据治理等核心业务。
          </p>
          <p class="section-text">
            我基于大语言模型（LLM）技术，结合实时数据库查询，能够为您提供专业、深入、可操作的数据分析报告和决策建议。
          </p>
        </div>

        <div class="detail-section">
          <h3 class="section-title">✨ 核心功能</h3>
          <div class="feature-group">
            <h4 class="feature-title">📊 数据统计查询</h4>
            <ul class="feature-list">
              <li>基金数据概览：基金总数、类型分布、投资风格分布等</li>
              <li>标签体系分析：标签数量、类别分布、覆盖率统计</li>
              <li>聚类结果评估：聚类数量、规模分析、覆盖率评估</li>
              <li>数据更新状态：最新更新时间、更新延迟预警</li>
              <li>数据质量评估：数据完整性、缺失字段、异常数据识别</li>
            </ul>
          </div>
          <div class="feature-group">
            <h4 class="feature-title">🔍 智能分析</h4>
            <ul class="feature-list">
              <li>深度解读：不仅告诉您"是什么"，更解释"为什么"和"怎么办"</li>
              <li>异常识别：自动发现数据中的异常、缺失或不一致问题</li>
              <li>趋势洞察：分析数据变化趋势和潜在规律</li>
              <li>优先级建议：提供数据质量改进的优先级排序</li>
            </ul>
          </div>
          <div class="feature-group">
            <h4 class="feature-title">💡 专业建议</h4>
            <ul class="feature-list">
              <li>问题诊断：分析数据现状背后的原因</li>
              <li>改进措施：提供具体、可操作的改进步骤和方法</li>
              <li>风险提示：识别需要注意的风险点</li>
              <li>最佳实践：结合行业标准和最佳实践给出建议</li>
            </ul>
          </div>
        </div>

        <div class="detail-section">
          <h3 class="section-title">🎯 适用场景</h3>
          <div class="scenario-group">
            <h4 class="scenario-title">日常数据监控</h4>
            <ul class="scenario-list">
              <li>"当前系统有多少只基金？"</li>
              <li>"数据更新到什么时候了？"</li>
              <li>"标签覆盖率是多少？"</li>
            </ul>
          </div>
          <div class="scenario-group">
            <h4 class="scenario-title">数据质量评估</h4>
            <ul class="scenario-list">
              <li>"数据完整性怎么样？"</li>
              <li>"有哪些数据缺失？"</li>
              <li>"数据质量评分是多少？"</li>
            </ul>
          </div>
          <div class="scenario-group">
            <h4 class="scenario-title">问题诊断与优化</h4>
            <ul class="scenario-list">
              <li>"为什么标签覆盖率低？"</li>
              <li>"数据更新延迟的原因是什么？"</li>
              <li>"如何提升聚类质量？"</li>
            </ul>
          </div>
          <div class="scenario-group">
            <h4 class="scenario-title">决策支持</h4>
            <ul class="scenario-list">
              <li>"我应该优先处理哪些数据问题？"</li>
              <li>"数据采集任务执行情况如何？"</li>
              <li>"特征工程进展如何？"</li>
            </ul>
          </div>
        </div>

        <div class="detail-section">
          <h3 class="section-title">💬 示例问题</h3>
          <div class="example-category">
            <h4 class="category-title">数据概览类</h4>
            <ul class="example-list">
              <li>"系统里有多少只基金？"</li>
              <li>"基金类型分布情况如何？"</li>
              <li>"股票型基金有多少只？"</li>
            </ul>
          </div>
          <div class="example-category">
            <h4 class="category-title">标签相关</h4>
            <ul class="example-list">
              <li>"标签统计情况如何？"</li>
              <li>"标签覆盖率是多少？"</li>
              <li>"哪些基金缺少标签？"</li>
              <li>"标签分布情况怎么样？"</li>
            </ul>
          </div>
          <div class="example-category">
            <h4 class="category-title">聚类相关</h4>
            <ul class="example-list">
              <li>"聚类结果如何？"</li>
              <li>"有多少个聚类？"</li>
              <li>"聚类质量怎么样？"</li>
              <li>"聚类覆盖率是多少？"</li>
            </ul>
          </div>
          <div class="example-category">
            <h4 class="category-title">数据更新</h4>
            <ul class="example-list">
              <li>"数据更新到什么时候了？"</li>
              <li>"数据更新延迟了吗？"</li>
              <li>"最新净值日期是什么时候？"</li>
            </ul>
          </div>
          <div class="example-category">
            <h4 class="category-title">数据质量</h4>
            <ul class="example-list">
              <li>"数据完整性如何？"</li>
              <li>"有哪些数据缺失？"</li>
              <li>"数据质量评分是多少？"</li>
              <li>"数据异常情况如何？"</li>
            </ul>
          </div>
          <div class="example-category">
            <h4 class="category-title">综合分析</h4>
            <ul class="example-list">
              <li>"给我一个数据质量报告"</li>
              <li>"当前数据存在哪些问题？"</li>
              <li>"我应该优先处理哪些问题？"</li>
            </ul>
          </div>
        </div>

        <div class="detail-section">
          <h3 class="section-title">🚀 使用方式</h3>
          <ul class="usage-list">
            <li><strong>直接提问：</strong>在输入框中输入您的问题，支持自然语言</li>
            <li><strong>智能识别：</strong>系统会自动识别问题类型，查询相关数据</li>
            <li><strong>专业回答：</strong>获得包含数据统计、深度分析和改进建议的专业回答</li>
          </ul>
        </div>

        <div class="detail-section">
          <h3 class="section-title">📝 注意事项</h3>
          <ul class="notice-list">
            <li>本助手专注于数据管理相关问题，包括数据采集、更新、标签、聚类、特征工程等</li>
            <li>回答基于实时数据库查询，确保数据准确性</li>
            <li>对于非数据查询类问题（如问候、闲聊），助手会友好回应，但不会输出数据统计信息</li>
          </ul>
        </div>

        <div class="detail-section">
          <h3 class="section-title">💡 提示</h3>
          <ul class="tip-list">
            <li>问题越具体，回答越精准</li>
            <li>可以询问数据统计、质量评估、问题诊断等各类数据管理相关问题</li>
            <li>支持中英文混合提问</li>
          </ul>
        </div>

        <div class="detail-footer">
          <p class="footer-text">开始使用：在下方输入框输入您的问题，让我帮您快速了解和管理基金数据！</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { ChatDotRound, User, InfoFilled } from '@element-plus/icons-vue';
import { askQuestion } from '@/api/qaApi';

const dialogVisible = ref(false);
const question = ref('');
const loading = ref(false);
const messages = ref([]);
const chatHistoryRef = ref(null);
const questionInput = ref(null);
const showDetailDialog = ref(false);

const MESSAGES_STORAGE_KEY = 'qa_bot_messages';

// 拖动相关
const isDragging = ref(false);
const position = ref({ x: 100, y: 100 }); // 默认位置，会在 onMounted 中更新
const dragStart = ref({ x: 0, y: 0 });

// 保存消息到 localStorage
const saveMessages = () => {
  try {
    localStorage.setItem(MESSAGES_STORAGE_KEY, JSON.stringify(messages.value));
  } catch (e) {
    console.error('Failed to save messages', e);
  }
};

// 从 localStorage 加载消息
const loadMessages = () => {
  try {
    const saved = localStorage.getItem(MESSAGES_STORAGE_KEY);
    if (saved) {
      const parsed = JSON.parse(saved);
      if (Array.isArray(parsed)) {
        // 为旧消息添加默认时间戳（如果没有的话）
        messages.value = parsed.map(msg => ({
          ...msg,
          timestamp: msg.timestamp || Date.now() - (parsed.length - parsed.indexOf(msg)) * 1000
        }));
      }
    }
  } catch (e) {
    console.error('Failed to load messages', e);
  }
};

// 从 localStorage 加载位置
onMounted(() => {
  // 加载位置
  const saved = localStorage.getItem('qa_bot_position');
  if (saved) {
    try {
      const pos = JSON.parse(saved);
      // 确保位置在可视区域内
      const maxX = window.innerWidth - 60;
      const maxY = window.innerHeight - 60;
      position.value = {
        x: Math.max(0, Math.min(pos.x, maxX)),
        y: Math.max(0, Math.min(pos.y, maxY)),
      };
    } catch (e) {
      console.error('Failed to load bot position', e);
      // 如果加载失败，使用默认位置（右下角）
      position.value = {
        x: Math.max(0, window.innerWidth - 100),
        y: Math.max(0, window.innerHeight - 150),
      };
    }
  } else {
    // 如果没有保存的位置，使用默认位置（右下角）
    position.value = {
      x: Math.max(0, window.innerWidth - 100),
      y: Math.max(0, window.innerHeight - 150),
    };
  }
  
  // 加载消息历史
  loadMessages();
});

// 保存位置到 localStorage
const savePosition = () => {
  localStorage.setItem('qa_bot_position', JSON.stringify(position.value));
};

const startDrag = (e) => {
  isDragging.value = true;
  dragStart.value = {
    x: e.clientX - position.value.x,
    y: e.clientY - position.value.y,
  };
  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', stopDrag);
  e.preventDefault();
};

const onDrag = (e) => {
  if (!isDragging.value) return;
  const newX = e.clientX - dragStart.value.x;
  const newY = e.clientY - dragStart.value.y;
  
  // 限制在可视区域内
  const maxX = window.innerWidth - 60;
  const maxY = window.innerHeight - 60;
  
  position.value = {
    x: Math.max(0, Math.min(newX, maxX)),
    y: Math.max(0, Math.min(newY, maxY)),
  };
};

const stopDrag = () => {
  isDragging.value = false;
  savePosition();
  document.removeEventListener('mousemove', onDrag);
  document.removeEventListener('mouseup', stopDrag);
};

const toggleDialog = () => {
  if (!isDragging.value) {
    dialogVisible.value = !dialogVisible.value;
  }
};

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (chatHistoryRef.value) {
      chatHistoryRef.value.scrollTop = chatHistoryRef.value.scrollHeight;
    }
  });
};

// 监听消息变化，自动滚动并保存
watch(messages, () => {
  scrollToBottom();
  saveMessages();
}, { deep: true });

const submitQuestion = async () => {
  if (!question.value.trim() || loading.value) return;

  const userQuestion = question.value.trim();
  question.value = '';

  // 添加用户消息
  messages.value.push({
    type: 'user',
    content: userQuestion,
    timestamp: Date.now(),
  });

  loading.value = true;
  scrollToBottom();

  try {
    const response = await askQuestion(userQuestion);
    if (response.success) {
      messages.value.push({
        type: 'bot',
        content: response.answer || '抱歉，我无法回答这个问题。',
        timestamp: Date.now(),
      });
    } else {
      messages.value.push({
        type: 'bot',
        content: '抱歉，处理您的问题时出现了错误。',
        timestamp: Date.now(),
      });
      ElMessage.error('问答失败');
    }
  } catch (error) {
    console.error('QA error:', error);
    messages.value.push({
      type: 'bot',
      content: '抱歉，网络请求失败，请稍后重试。',
      timestamp: Date.now(),
    });
    ElMessage.error(error?.response?.data?.message || '请求失败');
  } finally {
    loading.value = false;
    scrollToBottom();
  }
};

const clearHistory = () => {
  messages.value = [];
  saveMessages();
  ElMessage.success('历史记录已清空');
};

// 格式化消息时间
const formatMessageTime = (timestamp) => {
  if (!timestamp) return '';
  try {
    const date = new Date(timestamp);
    if (isNaN(date.getTime())) return '';
    
    const now = new Date();
    const diff = now - date;
    
    // 如果是今天，只显示时间
    if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
      return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
    }
    
    // 如果是昨天
    if (diff < 48 * 60 * 60 * 1000 && date.getDate() === now.getDate() - 1) {
      return '昨天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
    }
    
    // 其他情况显示完整日期时间
    return date.toLocaleString('zh-CN', { 
      month: '2-digit', 
      day: '2-digit', 
      hour: '2-digit', 
      minute: '2-digit' 
    });
  } catch (e) {
    return '';
  }
};
</script>

<style scoped>
.qa-bot-icon {
  position: fixed;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  z-index: 9998;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: white;
}

.icon-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 50%, #85c1ff 100%);
  box-shadow: 
    0 0 20px rgba(64, 158, 255, 0.6),
    0 0 40px rgba(64, 158, 255, 0.4),
    0 4px 20px rgba(64, 158, 255, 0.3),
    inset 0 2px 10px rgba(255, 255, 255, 0.2);
  animation: glow-pulse 2s ease-in-out infinite;
}

.icon-inner {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    inset 0 2px 8px rgba(255, 255, 255, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.qa-bot-icon:hover .icon-inner {
  transform: scale(1.05);
  box-shadow: 
    inset 0 2px 12px rgba(255, 255, 255, 0.4),
    0 4px 16px rgba(64, 158, 255, 0.5);
}

.qa-bot-icon:hover .icon-glow {
  box-shadow: 
    0 0 30px rgba(64, 158, 255, 0.8),
    0 0 60px rgba(64, 158, 255, 0.5),
    0 6px 30px rgba(64, 158, 255, 0.4),
    inset 0 2px 10px rgba(255, 255, 255, 0.3);
}

.qa-bot-icon.dragging {
  cursor: grabbing;
}

.qa-bot-icon.dragging .icon-inner {
  transform: scale(0.95);
  opacity: 0.9;
}

.qa-bot-icon.pulse .icon-glow {
  animation: glow-pulse 2s ease-in-out infinite, float 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(64, 158, 255, 0.6),
      0 0 40px rgba(64, 158, 255, 0.4),
      0 4px 20px rgba(64, 158, 255, 0.3),
      inset 0 2px 10px rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(64, 158, 255, 0.8),
      0 0 60px rgba(64, 158, 255, 0.6),
      0 6px 30px rgba(64, 158, 255, 0.4),
      inset 0 2px 10px rgba(255, 255, 255, 0.3);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #f56c6c 0%, #ff7875 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.4);
  z-index: 2;
  animation: badge-bounce 0.5s ease-out;
}

.notification-badge span {
  color: white;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

@keyframes badge-bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.qa-dialog :deep(.el-dialog) {
  border-radius: 32px;
  overflow: hidden;
  border: none;
  box-shadow: 
    0 25px 80px rgba(0, 0, 0, 0.2),
    0 10px 40px rgba(64, 158, 255, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 100px rgba(64, 158, 255, 0.1);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  animation: dialogSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qa-dialog :deep(.el-dialog)::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, 
    rgba(64, 158, 255, 0.3) 0%, 
    rgba(102, 177, 255, 0.2) 25%,
    rgba(133, 193, 255, 0.15) 50%,
    rgba(102, 177, 255, 0.2) 75%,
    rgba(64, 158, 255, 0.3) 100%
  );
  border-radius: 34px;
  z-index: -1;
  opacity: 0.6;
  animation: borderGlow 3s ease-in-out infinite;
  filter: blur(8px);
}

.qa-dialog :deep(.el-dialog)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(64, 158, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(102, 177, 255, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  border-radius: 32px;
}

@keyframes borderGlow {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
}

.qa-dialog :deep(.el-dialog__wrapper) {
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.3);
}

@keyframes dialogSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.qa-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 30%, #85c1ff 60%, #a8d4ff 100%);
  color: white;
  padding: 28px 32px;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 4px 20px rgba(64, 158, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 1;
}

.qa-dialog :deep(.el-dialog__header)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: shimmer 4s infinite;
}

.qa-dialog :deep(.el-dialog__header)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.6) 20%, 
    rgba(255, 255, 255, 0.8) 50%, 
    rgba(255, 255, 255, 0.6) 80%, 
    transparent
  );
  animation: headerGlow 3s ease-in-out infinite;
}

@keyframes headerGlow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.dialog-title-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  padding: 4px 0;
}

.dialog-title-wrapper::before {
  content: '💬';
  font-size: 28px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
  animation: iconBounce 2.5s ease-in-out infinite;
  position: relative;
  z-index: 1;
  display: inline-block;
  transform-origin: center;
  line-height: 1;
}

.dialog-title-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 42px;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.4) 0%, 
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transform: translateY(-50%);
  z-index: 0;
  border-radius: 1px;
}

.dialog-title-text {
  color: #1e3a8a;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.8px;
  position: relative;
  display: inline-block;
  z-index: 1;
  text-shadow: 
    0 1px 2px rgba(255, 255, 255, 0.8),
    0 2px 4px rgba(255, 255, 255, 0.6);
  animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes iconBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3px) rotate(-5deg);
  }
  50% {
    transform: translateY(-2px) rotate(0deg);
  }
  75% {
    transform: translateY(-3px) rotate(5deg);
  }
}

.qa-dialog :deep(.el-dialog__headerbtn) {
  top: 28px;
  right: 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.qa-dialog :deep(.el-dialog__headerbtn:hover) {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.qa-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
  font-size: 18px;
  transition: all 0.3s ease;
  font-weight: 600;
}

.qa-dialog :deep(.el-dialog__headerbtn .el-dialog__close:hover) {
  transform: rotate(90deg) scale(1.1);
  color: rgba(255, 255, 255, 1);
}

.qa-dialog :deep(.el-dialog__body) {
  padding: 0;
  background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
  position: relative;
  z-index: 1;
  border-radius: 0 0 32px 32px;
}

.qa-content {
  display: flex;
  flex-direction: column;
  height: 580px;
  background: transparent;
  position: relative;
}

.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px;
  background: linear-gradient(to bottom, 
    rgba(248, 250, 252, 0.8) 0%, 
    rgba(255, 255, 255, 0.9) 50%,
    rgba(248, 250, 252, 0.8) 100%
  );
  position: relative;
  backdrop-filter: blur(10px);
}

.chat-history::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(64, 158, 255, 0.3) 20%, 
    rgba(64, 158, 255, 0.5) 50%, 
    rgba(64, 158, 255, 0.3) 80%, 
    transparent
  );
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}


.chat-history::-webkit-scrollbar {
  width: 8px;
}

.chat-history::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.5);
  border-radius: 4px;
}

.chat-history::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #409EFF, #66b1ff);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.chat-history::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #66b1ff, #85c1ff);
  background-clip: padding-box;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 32px 24px;
  text-align: left;
  overflow-y: auto;
}

.intro-container {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}

.intro-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid rgba(64, 158, 255, 0.1);
}

.intro-icon {
  font-size: 56px;
  margin-bottom: 16px;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(64, 158, 255, 0.3));
}

.intro-title {
  font-size: 24px;
  font-weight: 700;
  color: #303133;
  margin: 0 0 12px 0;
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
}

.intro-subtitle {
  font-size: 15px;
  color: #606266;
  line-height: 1.8;
  margin: 0;
  padding: 0 20px;
}

.intro-capabilities,
.intro-examples {
  margin-bottom: 28px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.05) 0%, rgba(102, 177, 255, 0.03) 100%);
  border-radius: 16px;
  border: 1px solid rgba(64, 158, 255, 0.1);
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.08);
}

.capabilities-title,
.examples-title {
  font-size: 18px;
  font-weight: 600;
  color: #409EFF;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.capabilities-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.capabilities-list li {
  font-size: 14px;
  color: #606266;
  line-height: 1.8;
  padding: 8px 0 8px 24px;
  position: relative;
  transition: all 0.3s ease;
}

.capabilities-list li::before {
  content: '•';
  position: absolute;
  left: 8px;
  color: #409EFF;
  font-weight: bold;
  font-size: 18px;
}

.capabilities-list li:hover {
  color: #409EFF;
  transform: translateX(4px);
}

.example-chips {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.example-chip {
  padding: 12px 16px;
  background: white;
  border: 1.5px solid rgba(64, 158, 255, 0.2);
  border-radius: 10px;
  font-size: 14px;
  color: #409EFF;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.example-chip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #409EFF, #66b1ff);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.example-chip:hover {
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(102, 177, 255, 0.05) 100%);
  border-color: #409EFF;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.example-chip:hover::before {
  transform: scaleY(1);
}

.intro-footer {
  text-align: center;
  padding-top: 24px;
  border-top: 2px solid rgba(64, 158, 255, 0.1);
}

.footer-text {
  font-size: 14px;
  color: #909399;
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.detail-link {
  color: #409EFF;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.detail-link:hover {
  background: rgba(64, 158, 255, 0.1);
  color: #66b1ff;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
  animation: float 3s ease-in-out infinite;
}

.empty-text {
  font-size: 18px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 8px;
}

.empty-hint {
  font-size: 14px;
  color: #909399;
  line-height: 1.6;
}

.message {
  margin-bottom: 24px;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-content {
  display: flex;
  align-items: flex-start;
}

.user-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-left: auto;
  max-width: 75%;
  flex-direction: row-reverse;
}

.bot-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-right: auto;
  max-width: 75%;
}

.message-avatar {
  flex-shrink: 0;
  position: relative;
}

.user-icon,
.bot-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 0 3px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.user-icon {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  color: white;
}

.bot-icon {
  background: linear-gradient(135deg, #67c23a 0%, #85d76a 100%);
  color: white;
}

.user-message:hover .user-icon,
.bot-message:hover .bot-icon {
  transform: scale(1.05);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(255, 255, 255, 0.2);
}

.message-bubble {
  position: relative;
  max-width: 100%;
  transition: all 0.3s ease;
}

.user-bubble {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  border-radius: 24px 24px 6px 24px;
  padding: 14px 18px;
  box-shadow: 
    0 4px 12px rgba(64, 158, 255, 0.3),
    0 2px 6px rgba(64, 158, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
}

.user-bubble::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent #409EFF;
}

.bot-bubble {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e4e7ed;
  border-radius: 24px 24px 24px 6px;
  padding: 16px 18px;
  box-shadow: 
    0 2px 12px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
}

.bot-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent #ffffff transparent transparent;
}

.bot-bubble::after {
  content: '';
  position: absolute;
  left: -9px;
  top: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent #e4e7ed transparent transparent;
}

.user-message:hover .user-bubble {
  box-shadow: 
    0 6px 20px rgba(64, 158, 255, 0.4),
    0 3px 8px rgba(64, 158, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.bot-message:hover .bot-bubble {
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-color: #d4e3fc;
  transform: translateY(-2px);
}

.message-header {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bot-name {
  font-size: 12px;
  font-weight: 600;
  color: #67c23a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.bot-name::before {
  content: '🤖';
  font-size: 14px;
}

.detail-link-btn {
  color: #909399;
  font-size: 11px;
  padding: 4px 8px;
  height: auto;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.detail-link-btn:hover {
  color: #409EFF;
  opacity: 1;
  background: rgba(64, 158, 255, 0.08);
}

.message-text {
  line-height: 1.7;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-size: 14px;
  position: relative;
}

.user-bubble .message-text {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.bot-bubble .message-text {
  color: #303133;
}

.message-time {
  font-size: 11px;
  margin-top: 8px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-bubble .message-time {
  color: rgba(255, 255, 255, 0.9);
  justify-content: flex-end;
}

.bot-bubble .message-time {
  color: #909399;
}

.message-time::before {
  content: '🕐';
  font-size: 10px;
}

.loading-text {
  display: flex;
  gap: 4px;
  align-items: center;
}

.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #409EFF;
  animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.input-area {
  padding: 24px 28px;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 0.98) 100%
  );
  border-top: 2px solid rgba(232, 244, 255, 0.8);
  box-shadow: 
    0 -4px 20px rgba(0, 0, 0, 0.05),
    0 -2px 8px rgba(64, 158, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 2;
}

.input-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(64, 158, 255, 0.2) 20%, 
    rgba(64, 158, 255, 0.4) 50%, 
    rgba(64, 158, 255, 0.2) 80%, 
    transparent
  );
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  z-index: 1;
}

.input-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.input-area :deep(.el-button--primary) {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
  font-weight: 500;
}

.input-area :deep(.el-button--primary:hover) {
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

.input-area :deep(.el-button--primary:active) {
  transform: translateY(0);
}

.hint {
  margin-left: auto;
  font-size: 12px;
  color: #909399;
  padding: 6px 12px;
  background: rgba(64, 158, 255, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(64, 158, 255, 0.1);
}

.input-area :deep(.el-textarea__inner) {
  border-radius: 12px;
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
  padding: 12px 16px;
  font-size: 14px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.input-area :deep(.el-textarea__inner:hover) {
  border-color: #c0c4cc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.input-area :deep(.el-textarea__inner:focus) {
  border-color: #409EFF;
  box-shadow: 
    0 0 0 3px rgba(64, 158, 255, 0.1),
    0 4px 12px rgba(64, 158, 255, 0.15);
  outline: none;
}

/* 详细说明对话框样式 */
.detail-dialog :deep(.el-dialog) {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 
    0 25px 80px rgba(0, 0, 0, 0.2),
    0 10px 40px rgba(64, 158, 255, 0.25);
}

.detail-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  color: white;
  padding: 24px 32px;
  margin: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.detail-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
  font-size: 20px;
}

.detail-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
}

.detail-dialog :deep(.el-dialog__body) {
  padding: 32px;
  max-height: 70vh;
  overflow-y: auto;
  background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
}

.detail-content {
  color: #303133;
  line-height: 1.8;
}

.detail-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(64, 158, 255, 0.1);
}

.detail-section:last-of-type {
  border-bottom: none;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #409EFF;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(64, 158, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-text {
  font-size: 15px;
  color: #606266;
  line-height: 1.8;
  margin: 0 0 12px 0;
}

.feature-group,
.scenario-group,
.example-category {
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(64, 158, 255, 0.03);
  border-radius: 12px;
  border-left: 3px solid #409EFF;
}

.feature-title,
.scenario-title,
.category-title {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
  margin: 0 0 12px 0;
}

.feature-list,
.scenario-list,
.example-list,
.usage-list,
.notice-list,
.tip-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li,
.scenario-list li,
.example-list li,
.usage-list li,
.notice-list li,
.tip-list li {
  font-size: 14px;
  color: #606266;
  line-height: 1.8;
  padding: 6px 0 6px 24px;
  position: relative;
  transition: all 0.3s ease;
}

.feature-list li::before,
.scenario-list li::before,
.example-list li::before {
  content: '▸';
  position: absolute;
  left: 8px;
  color: #409EFF;
  font-weight: bold;
}

.usage-list li::before,
.notice-list li::before,
.tip-list li::before {
  content: '✓';
  position: absolute;
  left: 8px;
  color: #67c23a;
  font-weight: bold;
}

.feature-list li:hover,
.scenario-list li:hover,
.example-list li:hover {
  color: #409EFF;
  transform: translateX(4px);
}

.detail-footer {
  margin-top: 32px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(102, 177, 255, 0.05) 100%);
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(64, 158, 255, 0.2);
}

.detail-footer .footer-text {
  font-size: 15px;
  color: #409EFF;
  font-weight: 500;
  margin: 0;
}

.detail-dialog :deep(.el-dialog__body)::-webkit-scrollbar {
  width: 8px;
}

.detail-dialog :deep(.el-dialog__body)::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.5);
  border-radius: 4px;
}

.detail-dialog :deep(.el-dialog__body)::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #409EFF, #66b1ff);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.detail-dialog :deep(.el-dialog__body)::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #66b1ff, #85c1ff);
  background-clip: padding-box;
}
</style>

